<script setup>
import { onMounted, ref } from 'vue'
import Drawing from '@/libs/index'
let drawing
const videoUrl = ref('')

onMounted(() => {
  drawing = new Drawing({
    el: document.querySelector('#myCanvas'),
    backgroundColor: '#eee',
    lineWidth: 2,
    lineColor: '#f00'
  })
})

const handlerDrawType = (type) => {
  drawing.setDrawType(type)
}

const handlerBackDraw = () => {
  drawing.goback()
}

const handlerChooseFile = (e) => {
  const files = e.target?.files
  if (files && files.length) {
    const file = files[0]
    const src = URL.createObjectURL(file)
    drawing.createImage({ src })
  }
}

const handlerStartRecorder = () => {
  drawing.startRecorder()
}

const handlerStopRecorder = () => {
  drawing.stopRecorder().then((blob) => {
    if (blob) {
      const url = URL.createObjectURL(blob)
      videoUrl.value = url
    }
  })
}
</script>

<template>
  <div class="draw-wrapper">
    <div class="opts">
      <button @click="handlerDrawType('basicline')">画线</button>
      <button @click="handlerDrawType('straightline')">画直线</button>
      <button @click="handlerDrawType('rectangle')">画矩形</button>
      <button @click="handlerDrawType('circle')">画圆</button>
      <input type="file" @change="handlerChooseFile" />
      <button @click="handlerBackDraw">撤销</button>
      <button @click="handlerStartRecorder">开始录制</button>
      <button @click="handlerStopRecorder">结束录制</button>
    </div>
    <div id="myCanvas"></div>

    <video v-if="videoUrl" class="video" :src="videoUrl" controls></video>
  </div>
</template>

<style lang="less" scoped>
.draw-wrapper {
  .opts {
    margin: 0 auto;
    width: 800px;
    text-align: center;
  }
  #myCanvas {
    margin: 20px auto;
    width: 1400px;
    height: 800px;
  }
  .video {
    margin: 20px auto;
    width: 1400px;
    height: 800px;
  }
}
</style>
